import { useKeyPress } from 'ahooks';
import React, { useEffect, useState } from 'react'

const App=()=>{

    const [counter,setCounter]=useState(0);
    useKeyPress('uparrow',function(){
        setCounter(s=>s+1);
    })
    useKeyPress(40,function(){
        setCounter(s=>s-1);
    })

    // useEffect(()=>{
    //     document.addEventListener('keydown',function(e){
    //         console.log(e);
    //         if(e.keyCode==38){
    //             // setCounter(counter+1);  // 闭包
    //             setCounter((s)=>s+1);
    //         }
    //         if(e.keyCode==40){
    //             // setCounter(counter-1);
    //             setCounter(s=>s-1);
    //         }
    //     })
    // },[])

    return (
        <>
            <p>Try pressing the following</p>
            <div>1.press Arrowup by key to increase</div>
            <div>2.press Arrowdown by keycode to decrease</div>
            <div>
                count: <span style={{color:'#f00'}}>{counter}</span>
            </div>
        </>
    )
}

export default App;